<template>
	<div class="pages">
		<!-- 数据预览 -->
		<div class="data-preview">
			<div class="title">数据预览</div>
			<div class="container">
				<div class="item" v-for="(item, idx) in state.dataPreview" :key="idx">
					<div class="item-count" v-text="item.count"></div>
					<div class="item-title" v-text="item.title"></div>
				</div>
			</div>
		</div>
		<!-- 公告栏 -->
		<div class="bulletin-board">
			<div class="icon">
				<img src="../../assets/imgs/dataPreview/calendar.png">
			</div>
			<div class="content text-overflow" v-text="state.bulletinBoard.text"></div>
			<div class="badge" v-text="state.bulletinBoard.badge"></div>
		</div>
		<!-- 任务待办标题 -->
		<div class="taskbar">
			<div class="title">
				<div class="line"></div>
				<div class="text" v-text="state.taskbar.title"></div>
			</div>
			<div v-if="state.taskbar.badge" class="badge" v-text="state.taskbar.badge"></div>
		</div>
		<!-- 任务待办列表 -->
		<div class="lists-module-todu">
			<div class="lists">
				<div class="item" v-for="(item, idx) in state.taskbar.lists" :key="idx">
					<div class="date">
						<div class="time" v-text="item.date && dateFormat(item.date).time"></div>
						<div class="md" v-text="item.date && dateFormat(item.date).md"></div>
					</div>
					<div class="info">
						<div class="text">
							<div class="content" v-text="item.content"></div>
							<div class="company" v-text="'单位：' + item.company"></div>
						</div>
						<div class="line">
							<div class="circle"></div>
							<van-divider />
						</div>
					</div>
				</div>
			</div>
			<div class="more">
				<span class="text">查看更多</span>
				<van-icon name="play" :size="12" />
			</div>
		</div>
		<!-- 上报待办标题 -->
		<div class="taskbar">
			<div class="title">
				<div class="line"></div>
				<div class="text" v-text="state.escalationbar.title"></div>
			</div>
			<div v-if="state.escalationbar.badge" class="badge" v-text="state.escalationbar.badge"></div>
		</div>
		<!-- 上报待办列表 -->
		<div class="lists-module-todu">
			<div class="lists">
				<div class="item" v-for="(item, idx) in state.escalationbar.lists" :key="idx">
					<div class="date">
						<div class="time" v-text="item.date && dateFormat(item.date).time"></div>
						<div class="md" v-text="item.date && dateFormat(item.date).md"></div>
					</div>
					<div class="info">
						<div class="text">
							<div class="content" v-text="item.content"></div>
							<div class="company" v-text="'单位：' + item.company"></div>
						</div>
						<div class="line">
							<div class="circle"></div>
							<van-divider />
						</div>
					</div>
				</div>
			</div>
			<div class="more">
				<span class="text">查看更多</span>
				<van-icon name="play" :size="12" />
			</div>
		</div>
		<!-- 合规提示 -->
		<div class="taskbar">
			<div class="title">
				<div class="line"></div>
				<div class="text" v-text="state.tipsbar.title"></div>
			</div>
			<div v-if="state.tipsbar.badge" class="badge" v-text="state.tipsbar.badge"></div>
		</div>
		<!-- 合规提示列表 -->
		<div class="lists-module-tips">
			<div class="lists">
				<div class="item" v-for="(item, idx) in state.tipsbar.lists" :key="idx">
					<div class="info">
						<div class="circle"></div>
						<div class="text">
							<div class="content" v-text="item.content"></div>
							<div class="label text-overflow">
								<span class="company" v-text="'单位：' + item.company"></span>
								<span>·</span>
								<span class="date" v-text="item.date"></span>
							</div>
						</div>
					</div>
					<van-divider />
				</div>
			</div>
			<div class="more">
				<span class="text">查看更多</span>
				<van-icon name="play" :size="12" />
			</div>
		</div>
		<!-- 任务下发和主动上报统计 -->
		<div class="taskbar">
			<div class="title">
				<div class="line"></div>
				<div class="text" v-text="state.echartsbar.title"></div>
			</div>
			<div v-if="state.echartsbar.badge" class="badge" v-text="state.echartsbar.badge"></div>
		</div>
		<!-- 任务下发和主动上报统计 -->
		<div class="echarts-container">
			<van-tabs style="width:50%;" color="#F2F2F2" title-active-color="#F2F2F2" v-model:active="state.echartsbar.tabs.active" @change="tabChange" type="card">
				<van-tab name="year" title="年"></van-tab>
				<van-tab name="month" title="月"></van-tab>
				<van-tab name="day" title="日"></van-tab>
			</van-tabs>
			<Echarts :options="state.options" />
		</div>
	</div>
</template>

<script lang="ts" setup>
import { onMounted, reactive } from 'vue'
import Echarts from '../../components/Echarts/index.vue'
import '@/styles/font/stylesheet.css'

const state = reactive({
	// 数据预览列表
	dataPreview: [{
		title: '待接收任务',
		count: 3,
	}, {
		title: '待办理任务',
		count: 5,
	}, {
		title: '逾期任务',
		count: 1,
	}, {
		title: '待上报',
		count: 3,
	}],
	// 公告栏
	bulletinBoard: {
		text: '关于规范“6·18”网络促销经营活动关于规范“6·18”网络促销经营活动',
		badge: 0
	},
	// 任务代办
	taskbar: {
		title: '任务代办',
		badge: 12,
		lists: [] as any
	},
	// 上报代办
	escalationbar: {
		title: '上报代办',
		badge: 0,
		lists: [] as any
	},
	// 合规提示
	tipsbar: {
		title: '合规提示',
		badge: 0,
		lists: [] as any
	},
	// 任务下发和主动上报统计
	echartsbar: {
		title: '任务下发和主动上报统计',
		badge: 0,
		lists: [] as any,
		tabs: {
			active: 'year'
		}
	},
	options: {
		tooltip: {
			trigger: 'axis'
		},
		legend: {
			data: ['任务下发数据', '主动上报数据'],
			left: '1%',
			top: '4%',
			itemWidth: 9,
			itemHeight: 9,
			textStyle: {
				fontSize: 10,
				color: '#181818'
			},
		},
		grid: {
				left: "8%",
				right: "8%",
				top: "30%",
				bottom: "12%",
		},
		color: [ '#71DADE', '#4C69DC' ],
		calculable: true,
		label: {
			show: true, //开启显示数值
			position: 'top', //数值在上方显示
			color: '#646464',   //字体颜色
			fontSize: 10  //字体大小
		},
		xAxis: [
			{
				type: 'category',
				// prettier-ignore
				data: ['22-03', '22-04', '22-05', '22-06', '22-07', '22-08', '22-09']
			}
		],
		yAxis: [
			{
				type: 'value'
			}
		],
		series: [
			{
				name: '任务下发数据',
				type: 'bar',
				barWidth: 8,
				data: [32, 16, 32, 32, 32, 32, 32],
			},
			{
				name: '主动上报数据',
				type: 'bar',
				barWidth: 8,
				data: [24, 24, 21, 24, 24, 24, 24],
			}
		]
	}
})

// 时间日期格式化
const dateFormat = (dateStr: any) => {
	const date = new Date(dateStr);
	let month = (date.getMonth() + 1).toString().padStart(2, '0');
	let day = date.getDate().toString().padStart(2, '0');
	let hours = date.getHours();
	let minutes: any = date.getMinutes();
	let ampm = hours >= 12 ? 'PM' : 'AM';
	hours = hours % 12;
	hours = hours ? hours : 12;
	minutes = minutes.toString().padStart(2, '0');
	let strTime = hours + ':' + minutes + ' ' + ampm;
	let strMD = month + '-' + day;
	return {
		time: strTime,
		md: strMD
	};
}

// tabs 切换回调
const tabChange = (value:any) => {
	console.log('value', value)
}

// 获取列表
const getLists = (lists: any[], length: number) => {
	const temp = lists.slice(0, length);
	return temp;
}

onMounted(() => {
	let lists = [{
		date: '2022-10-5 12:24:12',
		content: '关于规范“6·18”网络促销经营活动的 工作提示',
		company: '网监司'
	}, {
		date: '2022-10-5 12:24:12',
		content: '关于规范“6·18”网络促销经营活动的 工作提示',
		company: '网监司'
	}, {
		date: '2022-10-5 12:24:12',
		content: '关于规范“6·18”网络促销经营活动的 工作提示',
		company: '网监司'
	}, {
		date: '2022-10-5 12:24:12',
		content: '关于规范“6·18”网络促销经营活动的 工作提示',
		company: '网监司'
	}, {
		date: '2022-10-5 12:24:12',
		content: '关于规范“6·18”网络促销经营活动的 工作提示',
		company: '网监司'
	}, {
		date: '2022-10-5 12:24:12',
		content: '关于规范“6·18”网络促销经营活动的 工作提示',
		company: '网监司'
	}];

	state.taskbar.lists = getLists(lists, 4);
	state.escalationbar.lists = getLists(lists, 4);
	state.tipsbar.lists = getLists(lists, 6);
})

</script>
<style lang="scss" scoped>
.pages {
	box-sizing: border-box;
	padding: 12px;
	height: auto;

	// 数据预览
	.data-preview {
		background: #ffffff;
		border-radius: 5px;
		box-shadow: 0.5px 0.87px 4.5px 1px rgba(0, 0, 0, 0.05);
		padding: 12px;

		.title {
			font-size: 18px;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			text-align: left;
			color: #181818;
			margin-bottom: 12px;
		}

		.container {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			grid-template-rows: repeat(2, minmax(0, 1fr));

			.item {
				background-position: center;
				background-repeat: no-repeat;
				background-size: 100% 100%;
				box-sizing: border-box;

				&:nth-child(1) {
					background-image: url('../../assets/imgs/dataPreview/rw-djs.png');
				}

				&:nth-child(2) {
					background-image: url('../../assets/imgs/dataPreview/rw-dbl.png');
				}

				&:nth-child(3) {
					background-image: url('../../assets/imgs/dataPreview/rw-yq.png');
				}

				&:nth-child(4) {
					background-image: url('../../assets/imgs/dataPreview/rw-dsb.png');
				}

				.item-count {
					font-size: 24px;
					color: #ffffff;
					font-family: "lcd";
					font-weight: bold;
					margin-top: 14px;
					margin-left: 20px;
					margin-bottom: 4px;
					letter-spacing: 2px;
				}

				.item-title {
					font-size: 10px;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: bold;
					text-align: left;
					color: #ffffff;
					margin-left: 20px;
					margin-bottom: 14px;
				}
			}
		}
	}

	// 公告栏
	.bulletin-board {
		margin-top: 16px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;

		background: #ffffff;
		border-radius: 5px;
		box-shadow: 0.5px 0.87px 4.5px 1px rgba(0, 0, 0, 0.05);

		.icon {
			box-sizing: border-box;
			background-color: $primary-color;
			border-radius: 5px;
			box-shadow: 0.5px 0.87px 4.5px 1px rgba(0, 0, 0, 0.05);

			img {
				width: 16px;
				height: 16px;
				margin: 10px;
			}
		}

		.content {
			width: 80%;
			font-size: 14px;
			font-weight: 400;
			text-align: left;
			color: #1f2e4c;
			margin: 0 12px;
		}

		.badge {
			background-color: #F1F4FF;
			width: 28px;
			height: 16px;
			border-radius: 6.5px;
			margin-right: 12px;
			text-align: center;
			line-height: 16px;
			font-size: 10px;
			font-weight: bold;
			color: #4775ef;
		}
	}

	//任务待办
	.taskbar {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.title {
			display: flex;
			align-items: center;
			margin: 16px 0;

			.line {
				width: 4px;
				height: 16px;
				margin-right: 8px;
				background-color: $primary-color;
			}

			.text {
				font-weight: 700;
				text-align: left;
				color: #181818;
				line-height: 12px;
			}
		}

		.badge {
			width: 29px;
			height: 16px;
			border-radius: 8.5px;
			background-color: $primary-color;
			text-align: center;
			line-height: 16px;
			font-size: 10px;
			font-weight: bold;
			color: #fff;
		}
	}

	//列表模板-待办
	.lists-module-todu {
		background: #ffffff;
		border-radius: 5px;
		box-shadow: 0.5px 0.87px 4.5px 1px rgba(0, 0, 0, 0.05);

		.lists {
			.item {
				display: flex;
				flex-direction: row;

				.date {
					white-space: nowrap;
					font-size: 10px;
					font-weight: 700;
					text-align: right;
					color: #646464;
					line-height: 12px;
					margin: 24px 12px 0;

					.time {
						margin-bottom: 2px;
					}
				}

				.info {
					box-sizing: border-box;
					margin: 16px 12px 0 0;

					.text {
						background: #f7f7f7;
						border-radius: 5px;
						padding: 12px;

						.content {
							font-size: 14px;
							font-weight: bold;
							text-align: left;
							color: #181818;
							margin-bottom: 7px;
							line-height: 16px;
						}

						.company {
							font-size: 10px;
							font-weight: bold;
							text-align: left;
							color: #646464;
							line-height: 16px;
						}
					}

					.line {
						display: flex;
						align-items: center;

						.circle {
							width: 3px;
							height: 3px;
							background-color: $primary-color;
							border-radius: 50%;
						}

						.van-divider {
							flex: 1;
						}
					}
				}
			}
		}

		.more {
			height: 38px;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #f1f4ff;
			border-radius: 5px;
			margin: 16px 12px;

			font-size: 14px;
			font-family: PingFang SC, PingFang SC-Medium;
			font-weight: bold;
			color: $primary-color;
			line-height: 16px;

			.text {
				margin-right: 4px;
			}
		}
	}

	// 列表模板-提示
	.lists-module-tips {
		background: #ffffff;
		border-radius: 5px;
		box-shadow: 0.5px 0.87px 4.5px 1px rgba(0, 0, 0, 0.05);
		box-sizing: border-box;

		.lists {
			padding-top: 16px;

			.item {
				display: flex;
				flex-direction: column;
				padding: 0 12px 0 12px;

				.info {
					display: flex;
					flex-direction: row;

					.circle {
						width: 4px;
						height: 4px;
						background-color: $primary-color;
						border-radius: 50%;
						margin-top: 5px;
						margin-right: 8px;
					}

					.text {
						flex: 1;

						.content {
							font-size: 14px;
							font-weight: bold;
							text-align: left;
							color: #181818;
							line-height: 16px;
							margin-bottom: 8px;
						}

						.label {
							font-size: 10px;
							font-weight: bold;
							text-align: left;
							color: #646464;
							line-height: 16px;
							white-space: nowrap;

							.company {
								margin-right: 4px;
							}

							.date {
								margin-left: 4px;
							}
						}
					}
				}
			}
		}

		.more {
			height: 38px;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #f1f4ff;
			border-radius: 5px;
			margin: 0px 12px 16px 12px;

			font-size: 14px;
			font-family: PingFang SC, PingFang SC-Medium;
			font-weight: bold;
			color: $primary-color;
			line-height: 16px;

			.text {
				margin-right: 4px;
			}
		}
	}

	// echarts-container
	.echarts-container {
		position: relative;
		height: 200px;
		box-sizing: border-box;
		padding: 16px 12px;
		background: #ffffff;
		border-radius: 5px;
		box-shadow: 0.5px 0.87px 4.5px 1px rgba(0, 0, 0, 0.05);
		&:deep(.van-tabs) {
			position: absolute;
			right: 0;
			z-index: 10;

			.van-tab--card.van-tab--active {
				color: $primary-color !important;
				background-color: #fff !important;
			}

			.van-tab {
				color: #181818 !important;
			}
		}
	}
}
</style>